import Vue from 'vue'
import VueRouter from 'vue-router'
import axios from 'axios'
import store from "../store"
import Login from "../views/Login"
import Index from "../views/Index.vue"

Vue.use(VueRouter)

const routes = [
    {
        path: '/home',
        name: 'Home',
        component: () => import('../views/Home.vue'),
        meta: { title: '简介' },
        children: [
            {
                path: '/sys/index',
                name: 'Index',
                component: Index,
                meta: { title: '简介' },
            },
            {
                path: '/sys/menu',
                name: 'SysMenu',
                component: () => import('../views/sys/Menu.vue'),
                meta: { title: '菜单管理' },
            },
            {
                path: '/sys/user',
                name: 'SysUser',
                component: () => import('../views/sys/User.vue'),
                meta: { title: '用户管理' },
            },
            {
                path: '/sys/system',
                name: 'System',
                component: () => import('../views/sys/System.vue'),
                meta: { title: '系统管理' },
            },
            {
                path: '/usercenter',
                name: 'UserCenter',
                component: () => import('../views/UserCenter.vue'),
                meta: { title: '个人中心' },
            },
        ]

    },
    {
        path: '/login',
        name: 'Login',
        component: Login,
        meta: { title: '登录' },
    },
    {
        path: '/',
        name: 'login',
        component: Login,
        meta: { title: '登录' },
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

// 菜单权限管理 状态管理 使用 router.beforeEach 注册一个全局前置守卫
router.beforeEach((to, from, next) => {
    
    // 设置title
    window.document.title = to.meta.title

    // 是否拥有权限
    let hasRoute = store.state.menus.hasRoutes

    // 获取token
	let token = localStorage.getItem("token")

	if (to.path == '/login') {
		next()

	} else if (!token) {
        // 跳转到登陆页面
		next({path: '/login'})
	} else if(token && !hasRoute) {
        // 获取菜单列表
		axios.get("/cat/sysmenu/nav", {
			headers: {
				Authorization: localStorage.getItem("token")
			}
		}).then(res => {

			// console.log(res.data.data)

			// 拿到menuList
			store.commit("setMenuList", res.data.data.nav)

			// 拿到用户权限
			store.commit("setPermList", res.data.data.authoritys)

			// console.log(store.state.menus.menuList)

			// 动态绑定路由
			let newRoutes = router.options.routes

			res.data.data.nav.forEach(menu => {
				if (menu.children) {
					menu.children.forEach(e => {
						// 转成路由
						let route = menuToRoute(e)
						// 把路由添加到路由管理中
						if (route) {
							newRoutes[0].children.push(route)
						}
					})
				}
			})
			router.addRoutes(newRoutes)
			hasRoute = true
			store.commit("changeRouteStatus", hasRoute)
		})
	}

	next()
})


// 导航转成路由
const menuToRoute = (menu) => {

	if (!menu.component) {
		return null
	}

	let route = {
		name: menu.name,
		path: menu.path,
		meta: {
			icon: menu.icon,
			title: menu.title
		}
	}
    //设置文件后缀名
	route.component = () => import('@/views/' + menu.component +'.vue')

	return route
}

export default router